<template>
    <div class="status-detail">
        <el-input v-model="searchName" placeholder="请输入学号"></el-input>
        <el-button type="primary" @click="getselectStuid">查询</el-button>
        <el-button type="primary" @click="addStuCourse">新增</el-button>
        <el-table :data="tableData" border class="container_wrap">
            <el-table-column prop="id" label="id" width="50">
            </el-table-column>
            <el-table-column prop="stuid" label="学号" width="150">
            </el-table-column>
            <el-table-column prop="stuname" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="course_name" label="课程名称" width="180">
            </el-table-column>
            <el-table-column prop="source" label="成绩" width="150">
            </el-table-column>
            <el-table-column prop="gpa" label="绩点" width="150">
            </el-table-column>
            <el-table-column prop="pass" label="是否通过" width="150">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" icon="el-icon-edit"
                        @click="editCourseInfo(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog width="500px" :title="dialogTitle" :visible.sync="dialogEditVisible">
            <el-form :model="form">
                <el-form-item label="学号" :label-width="formLabelWidth">
                    <el-input v-model="form.stuid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.stuname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程" :label-width="formLabelWidth">
                    <el-input v-model="form.course_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="成绩" :label-width="formLabelWidth">
                    <el-input v-model="form.source" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否通过" :label-width="formLabelWidth">
                    <el-select v-model="form.pass" placeholder="是否通过">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCourseInfo">确 定</el-button>
            </div>
        </el-dialog>

        <div class="pagination">
            <Pagination :pageCount="pagiDataAll" @cpnPageJumpTo="currentChange"></Pagination>
        </div>
    </div>
</template>

<script>
import Search from "@/components/search/Search.vue";
import Pagination from "@/components/pagination";
import {
    selectCourseByStuid,
    selectallCourseInfo,
    addCourseInfo,
    updateCourseInfo,
    deleteCourse
} from "@/api/request";

export default {
    name: "StatusDetail",
    components: {
        Search,
        Pagination,
    },
    created() {
        // 获取第0页学生信息
        this.getStudentMes();
    },
    data() {
        return {
            tableData: [],
            pagiDataAll: 0,
            // 设置flg，stu表示数据来源当前页面，name表示来自子组件searchname
            currentpage: "stu",
            searchName: "",
            dialogEditVisible: false,
            // punishData
            punishData: {},
            // 当前行学生信息
            stuBaseInfo: {},
            dialogTitle: "",
            formLabelWidth: '120px',
            form: {
                id: 0,
                stuid: '',
                stuname: '',
                course_name: '',
                source: 0,
                pass: ''
            },
        };
    },

    mounted() {
        // console.log(this.tableData);
    },
    computed: {
        getpagiDataAll() {
            return this.pagiDataAll;
        },
    },
    methods: {
        //修改学生课程信息
        editCourseInfo(index, row) {
            this.dialogTitle = "修改学生课程信息"
            console.log(index, row);
            this.form.id = row.id,
                this.form.stuid = row.stuid;
            this.form.stuname = row.stuname;
            this.form.course_name = row.course_name;
            this.form.source = row.source;
            this.form.pass = row.pass;
            this.dialogEditVisible = true;
        },
        //新增学生课程信息
        addStuCourse() {
            this.dialogTitle = "新增学生课程信息"
            this.form.stuid = ''
            this.form.stuname = ''
            this.form.course_name = ''
            this.form.source = ''
            this.form.pass = ''
            this.dialogEditVisible = true;
        },
        //提交学生课程信息
        submitCourseInfo() {
            //成绩<50 绩点零
            var source = this.form.source;
            var gpa = 5;
            if (source < 50) {
                gpa = 0
            } else {
                gpa = (source - 50) / 10;
            }
            //计算绩点：（成绩-50）/10
            var data = { id: this.form.id, stuid: this.form.stuid, stuname: this.form.stuname, course_name: this.form.course_name, source, gpa, pass: this.form.pass };
            console.log(data);
            if (this.dialogTitle == "新增学生课程信息") {
                addCourseInfo(data).then((res) => {
                    this.dialogEditVisible = false;
                    this.getStudentMes();
                });
            } else {
                updateCourseInfo(data).then((res) => {
                    this.dialogEditVisible = false;
                    this.getStudentMes();
                });
            }
        },
        // 删除学生课程信息
        handleDelete(index, row) {
            this.$confirm("确认删除？")
                .then(() => {
                    console.log(index, row);
                    deleteCourse(row)
                        .then(() => {
                            this.getStudentMes();
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        })
                        .catch((err) => {
                            this.$message.error("删除失败!");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 3.请求搜索id
        getselectStuid() {
            var stuid = this.searchName;
            var page = 0;
            selectCourseByStuid(stuid, page).then((res) => {
                this.pagiDataAll = res.data.pageAll;
                // console.log(res);
                let result = res.data.data;

                // 清空数组
                this.tableData.splice(0);
                this.tableData.push(...result);
            });
        },

        /**
         * 数据请求
         */
        // 1.获取学生信息和学籍信息
        getStudentMes(page = 0) {
            // 请求
            selectallCourseInfo(page).then((res) => {
                this.pagiDataAll = res.data.pageAll;
                // console.log(res);
                let result = res.data.data;

                // 过滤属性值为null的
                // this.resFilter(result);
                // 清空数组
                this.tableData.splice(0);
                this.tableData.push(...result);
            });
        },
        /**
         * 操作
         */
        // 对表格数据的日期进行格式化
        dateFormat(row, column) {
            const daterc = row[column.property];
            const timeFormat = daterc.split('T')[0]
            return timeFormat;
        },
        // 分页跳转，获取学生信息
        currentChange(item) {
            // stu页面
            if (this.currentpage === "stu") {
                this.getStudentMes(item - 1);
            }
            if (this.currentpage === "name") {
                this.getselectStuName(this.searchName, item - 1);
            }
            if (this.currentpage === "studentid") {
                this.getselectStuid(this.searchName, item - 1);
            }
        },
    },
};
</script>
<style lang='scss' scoped>
.el-select {
    width: 200px;
    margin-right: 30px;
    margin-left: 30px;
}

.el-input {
    width: 200px;
    margin-right: 30px;
    margin-top: 10px;
    margin-left: 30px;
}

.pagination {
    text-align: center;
    margin-top: 15px;
}

.name-wrapper {
    .el-tag {
        cursor: pointer;
    }
}
</style>